// 家庭媒体管理系统 - 响应式工具类

// ================================
// 响应式Mixin工具
// ================================

// 屏幕尺寸判断 mixin
@mixin screen-xs {
  @media (max-width: #{$breakpoint-xs - 1px}) {
    @content;
  }
}

@mixin screen-sm {
  @media (min-width: $breakpoint-xs) and (max-width: #{$breakpoint-sm - 1px}) {
    @content;
  }
}

@mixin screen-md {
  @media (min-width: $breakpoint-sm) and (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin screen-lg {
  @media (min-width: $breakpoint-md) and (max-width: #{$breakpoint-lg - 1px}) {
    @content;
  }
}

@mixin screen-xl {
  @media (min-width: $breakpoint-lg) and (max-width: #{$breakpoint-xl - 1px}) {
    @content;
  }
}

@mixin screen-2xl {
  @media (min-width: $breakpoint-xl) {
    @content;
  }
}

// 最小宽度断点
@mixin screen-xs-up {
  @media (min-width: $breakpoint-xs) {
    @content;
  }
}

@mixin screen-sm-up {
  @media (min-width: $breakpoint-sm) {
    @content;
  }
}

@mixin screen-md-up {
  @media (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin screen-lg-up {
  @media (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin screen-xl-up {
  @media (min-width: $breakpoint-xl) {
    @content;
  }
}

@mixin screen-2xl-up {
  @media (min-width: $breakpoint-2xl) {
    @content;
  }
}

// 最大宽度断点  
@mixin screen-xs-down {
  @media (max-width: #{$breakpoint-xs - 1px}) {
    @content;
  }
}

@mixin screen-sm-down {
  @media (max-width: #{$breakpoint-sm - 1px}) {
    @content;
  }
}

@mixin screen-md-down {
  @media (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin screen-lg-down {
  @media (max-width: #{$breakpoint-lg - 1px}) {
    @content;
  }
}

@mixin screen-xl-down {
  @media (max-width: #{$breakpoint-xl - 1px}) {
    @content;
  }
}

// 移动设备优先的断点
@mixin mobile {
  @media (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $breakpoint-md) and (max-width: #{$breakpoint-lg - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $breakpoint-lg) {
    @content;
  }
}

// Touch设备判断
@mixin touch-device {
  @media (hover: none) and (pointer: coarse) {
    @content;
  }
}

@mixin mouse-device {
  @media (hover: hover) and (pointer: fine) {
    @content;
  }
}

// 高密度屏幕
@mixin retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}

// 容器查询（实验性）
@mixin container-xs {
  @container (max-width: 320px) {
    @content;
  }
}

@mixin container-sm {
  @container (max-width: 640px) {
    @content;
  }
}

@mixin container-md {
  @container (max-width: 768px) {
    @content;
  }
}

// ================================
// 响应式工具类
// ================================

// 显示/隐藏工具类
@include screen-xs-down {
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
  .visible-xs-flex { display: flex !important; }
}

@include screen-sm {
  .hidden-sm { display: none !important; }
  .visible-sm { display: block !important; }
  .visible-sm-inline { display: inline !important; }
  .visible-sm-inline-block { display: inline-block !important; }
  .visible-sm-flex { display: flex !important; }
}

@include screen-md {
  .hidden-md { display: none !important; }
  .visible-md { display: block !important; }
  .visible-md-inline { display: inline !important; }
  .visible-md-inline-block { display: inline-block !important; }
  .visible-md-flex { display: flex !important; }
}

@include screen-lg {
  .hidden-lg { display: none !important; }
  .visible-lg { display: block !important; }
  .visible-lg-inline { display: inline !important; }
  .visible-lg-inline-block { display: inline-block !important; }
  .visible-lg-flex { display: flex !important; }
}

@include screen-xl-up {
  .hidden-xl { display: none !important; }
  .visible-xl { display: block !important; }
  .visible-xl-inline { display: inline !important; }
  .visible-xl-inline-block { display: inline-block !important; }
  .visible-xl-flex { display: flex !important; }
}

// 移动设备专用类
@include mobile {
  .hidden-mobile { display: none !important; }
  .visible-mobile { display: block !important; }
  .visible-mobile-flex { display: flex !important; }
}

@include desktop {
  .hidden-desktop { display: none !important; }
  .visible-desktop { display: block !important; }
  .visible-desktop-flex { display: flex !important; }
}

// 文本对齐响应式类
@include mobile {
  .text-center-mobile { text-align: center !important; }
  .text-left-mobile { text-align: left !important; }
  .text-right-mobile { text-align: right !important; }
}

@include tablet {
  .text-center-tablet { text-align: center !important; }
  .text-left-tablet { text-align: left !important; }
  .text-right-tablet { text-align: right !important; }
}

@include desktop {
  .text-center-desktop { text-align: center !important; }
  .text-left-desktop { text-align: left !important; }
  .text-right-desktop { text-align: right !important; }
}

// 间距响应式类
@include mobile {
  .p-mobile-2 { padding: $spacing-2 !important; }
  .p-mobile-4 { padding: $spacing-4 !important; }
  .p-mobile-6 { padding: $spacing-6 !important; }
  
  .m-mobile-2 { margin: $spacing-2 !important; }
  .m-mobile-4 { margin: $spacing-4 !important; }
  .m-mobile-6 { margin: $spacing-6 !important; }
  
  .px-mobile-2 { padding-left: $spacing-2 !important; padding-right: $spacing-2 !important; }
  .px-mobile-4 { padding-left: $spacing-4 !important; padding-right: $spacing-4 !important; }
  .px-mobile-6 { padding-left: $spacing-6 !important; padding-right: $spacing-6 !important; }
  
  .py-mobile-2 { padding-top: $spacing-2 !important; padding-bottom: $spacing-2 !important; }
  .py-mobile-4 { padding-top: $spacing-4 !important; padding-bottom: $spacing-4 !important; }
  .py-mobile-6 { padding-top: $spacing-6 !important; padding-bottom: $spacing-6 !important; }
}

// 网格响应式类
@include mobile {
  .grid-mobile-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@include tablet {
  .grid-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@include desktop {
  .grid-desktop-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-desktop-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grid-desktop-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .grid-desktop-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

// Flexbox响应式类
@include mobile {
  .flex-mobile-col { flex-direction: column !important; }
  .flex-mobile-row { flex-direction: row !important; }
  .justify-mobile-center { justify-content: center !important; }
  .justify-mobile-start { justify-content: flex-start !important; }
  .justify-mobile-end { justify-content: flex-end !important; }
  .justify-mobile-between { justify-content: space-between !important; }
  .items-mobile-center { align-items: center !important; }
  .items-mobile-start { align-items: flex-start !important; }
  .items-mobile-end { align-items: flex-end !important; }
}

@include tablet {
  .flex-tablet-col { flex-direction: column !important; }
  .flex-tablet-row { flex-direction: row !important; }
  .justify-tablet-center { justify-content: center !important; }
  .justify-tablet-start { justify-content: flex-start !important; }
  .justify-tablet-end { justify-content: flex-end !important; }
  .justify-tablet-between { justify-content: space-between !important; }
}

@include desktop {
  .flex-desktop-col { flex-direction: column !important; }
  .flex-desktop-row { flex-direction: row !important; }
  .justify-desktop-center { justify-content: center !important; }
  .justify-desktop-start { justify-content: flex-start !important; }
  .justify-desktop-end { justify-content: flex-end !important; }
  .justify-desktop-between { justify-content: space-between !important; }
}

// 宽度响应式类
@include mobile {
  .w-mobile-full { width: 100% !important; }
  .w-mobile-auto { width: auto !important; }
  .w-mobile-fit { width: fit-content !important; }
}

@include tablet {
  .w-tablet-full { width: 100% !important; }
  .w-tablet-auto { width: auto !important; }
  .w-tablet-fit { width: fit-content !important; }
}

@include desktop {
  .w-desktop-full { width: 100% !important; }
  .w-desktop-auto { width: auto !important; }
  .w-desktop-fit { width: fit-content !important; }
}

// 字体大小响应式类
@include mobile {
  .text-mobile-xs { font-size: $text-xs !important; }
  .text-mobile-sm { font-size: $text-sm !important; }
  .text-mobile-base { font-size: $text-base !important; }
  .text-mobile-lg { font-size: $text-lg !important; }
  .text-mobile-xl { font-size: $text-xl !important; }
  .text-mobile-2xl { font-size: $text-2xl !important; }
}

@include tablet {
  .text-tablet-xs { font-size: $text-xs !important; }
  .text-tablet-sm { font-size: $text-sm !important; }
  .text-tablet-base { font-size: $text-base !important; }
  .text-tablet-lg { font-size: $text-lg !important; }
  .text-tablet-xl { font-size: $text-xl !important; }
  .text-tablet-2xl { font-size: $text-2xl !important; }
  .text-tablet-3xl { font-size: $text-3xl !important; }
}

@include desktop {
  .text-desktop-sm { font-size: $text-sm !important; }
  .text-desktop-base { font-size: $text-base !important; }
  .text-desktop-lg { font-size: $text-lg !important; }
  .text-desktop-xl { font-size: $text-xl !important; }
  .text-desktop-2xl { font-size: $text-2xl !important; }
  .text-desktop-3xl { font-size: $text-3xl !important; }
  .text-desktop-4xl { font-size: $text-4xl !important; }
}

// Touch设备特殊样式
@include touch-device {
  .touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  .touch-friendly {
    padding: $spacing-4 !important;
  }
  
  .hover-effect {
    &:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }
}

// 鼠标设备特殊样式
@include mouse-device {
  .hover-lift:hover {
    transform: translateY(-2px) !important;
    box-shadow: $shadow-md !important;
    transition: all $duration-normal ease !important;
  }
  
  .hover-scale:hover {
    transform: scale(1.05) !important;
    transition: all $duration-normal ease !important;
  }
  
  .hover-opacity:hover {
    opacity: 0.8 !important;
    transition: opacity $duration-normal ease !important;
  }
}

// 高密度屏幕优化
@include retina {
  .retina-border {
    border-width: 0.5px !important;
  }
  
  .retina-image {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

// ================================
// 容器和布局响应式类
// ================================

// 响应式容器
.container-responsive {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: $spacing-4;
  padding-right: $spacing-4;

  @include screen-sm-up {
    max-width: 640px;
    padding-left: $spacing-6;
    padding-right: $spacing-6;
  }

  @include screen-md-up {
    max-width: 768px;
  }

  @include screen-lg-up {
    max-width: 1024px;
    padding-left: $spacing-8;
    padding-right: $spacing-8;
  }

  @include screen-xl-up {
    max-width: 1280px;
  }

  @include screen-2xl-up {
    max-width: 1536px;
  }
}

// 响应式网格
.grid-responsive {
  display: grid;
  gap: $spacing-4;
  grid-template-columns: 1fr;

  @include screen-sm-up {
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-6;
  }

  @include screen-md-up {
    grid-template-columns: repeat(3, 1fr);
  }

  @include screen-lg-up {
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-8;
  }

  @include screen-xl-up {
    grid-template-columns: repeat(5, 1fr);
  }
}

// 响应式Flex布局
.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: $spacing-4;

  @include screen-md-up {
    flex-direction: row;
    gap: $spacing-6;
  }

  @include screen-lg-up {
    gap: $spacing-8;
  }
}

// 卡片响应式
.card-responsive {
  padding: $spacing-4;
  border-radius: $radius-lg;
  
  @include screen-sm-up {
    padding: $spacing-6;
    border-radius: $radius-xl;
  }
  
  @include screen-lg-up {
    padding: $spacing-8;
  }
}

// 安全区域适配
.safe-area-padding {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.safe-area-padding-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}